<!DOCTYPE html>
<html>
	<head>
		<title>CSS Regions: separate floats flowed in autosized region</title>
		<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
		<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
		<link rel="help" href="http://www.w3.org/TR/css3-regions/#regions-visual-formatting-details">
		<meta name="flags" content="">
		<meta name="assert" content="Test checks that floats added to a named flow from different containers are stacked relative to the region container (not their initial container) and the region is correctly sized.">
		<link rel="match" href="reference/floats-in-named-flow-004-ref.html">
		<style>
		.flow {
			flow-into: f;
			color: gray;
		}
		.right {
			float: right;
		}
		.left {
			float: left;
		}
		.green {
			background: lime;
			height: 100px;
			width: 50px;
		}
		.blue {
			background: lightblue;
			width: 50px;
			height: 50px;
		}
		.purple {
			background: purple;
			width: 100px;
			height: 50px;
		}
		.region {
			flow-from: f;
			float: left;
			border-right: 25px solid black;
			margin: 5px;
		}
		.region p {
			background: red;
		}
		</style>
	</head>
	<body>
		<p>
			Test passes if you see four colored rectangles, as follows: a horizontal purple rectangle,
			a vertical green rectangle, a blue square and a narrow vertical black rectangle. The
			rectangles should be all flush to each other and have their top edges aligned.<br>
			Test fails is you see any red.
		</p>

		<div class="flow right blue"></div>
		<div class="flow right green"></div>
		<div class="flow left purple"></div>

		<!-- The region is auto-sized but since it has float: left it will shrink to fit -->
		<div class="region">
			<p>&nbsp;</p>
		</div>
	</body>
</html>